<template>
    <div style="display: flex;background-color: #fff;padding: 1rem;height: 15%;border-radius: 10px;">
        <div v-for="(item) in app" style="flex: 1;color: #888;font-size: 0.8rem;" @click="jump(item)">
            <div style="height: 80%;width: 100%;" >
                <img :src="`/imgs/${item.icon}`" alt="" srcset="" style="max-height: 100%;" class="testCenter">
            </div>
            <div style="text-align: center;">
                {{ item.name }}
            </div>
        </div>
    </div>
    <div>
        <RouterView></RouterView>
    </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import {applications} from "../../../util/application.ts"
import {useRouter} from "vue-router"
import {ElMessage} from 'element-plus'
const router = useRouter()
let app = reactive(applications)

const jump = (val:any)=>{
    console.log(val.router);
    try {
        router.push({
        name: val.router
    })
    } catch (error) {
        console.log(error);
        ElMessage.error('尽请期待')
    }
}


</script>

<style scoped>
    .testCenter{
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>